<template>
    <div class="nav-box">
        <div class="container">
            <div class="header">
                <div class="navigation-ico">
                    <div><b>WSW ICON</b></div>
                </div>
                <div class="item item-smaller" v-for="navigation in navigationMenu">
                    <div @click="toTarget(navigation.path)">
                        <div class="item-en">{{ navigation.enName }}</div>
                        <div class="item-ch">{{ navigation.chName }}</div>
                    </div>
                </div>
                <!-- 折叠菜单 -->
                <div class="item menu-icon">
                    <!-- 这里在菜单展开时进行页面的拉伸,子项并不会关闭,视觉上有些瑕疵,后期看情况调整 -->
                    <el-icon :size="iconSize">
                        <Menu />
                    </el-icon>
                </div>
                <div class="item">
                    <div class="r-icon-style">
                        <el-icon :size="iconSize">
                            <BellFilled />
                        </el-icon>
                    </div>
                    <div class="r-icon-style">
                        <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny"
                            :change="toggleDark" />
                    </div>
                    <div class="r-icon-style">
                        <el-icon @click="handleLogin" :size="iconSize">
                            <User />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="Index">
import { reactive, ref} from 'vue';
import { useRouter } from 'vue-router';
import { User, Sunny, Moon, BellFilled, Menu } from '@element-plus/icons-vue';
import { useDark, useToggle, useColorMode } from '@vueuse/core'
import type NavigationMenu from '@/types/NavigationMenu';
import { useLoginStore } from '@/store/loginStore';


const loginStore = useLoginStore()

//查出的所有菜单
const navigationMenu = reactive<NavigationMenu[]>([
    {
        id: 1,
        chName: "首页",
        enName: "INDEX",
        path: "/index"
    },
    {
        id: 2,
        chName: "头脑风暴",
        enName: "STORM",
        path: "/storm"
    },
    {
        id: 3,
        chName: "市集",
        enName: "MARKET",
        path: "/market"
    },
    {
        id: 4,
        chName: "更多",
        enName: "MORE",
        path: "/more"
    }
])

const router = useRouter()//获取整个路由器
const isDark = useDark()//暗黑开关
useColorMode() // 'light' or 'dark'
const toggleDark = useToggle(isDark)
const iconSize = ref(25)

/**
 * 登录处理-主要控制显示何种组件
 */
const handleLogin = ()=>{
    // 如果未登录,显示登录组件
    if(!loginStore.loginState){
        loginStore.loginDisplay = true
        return
    }
    // 否则显示用户信息
    router.push("/user")
}


/**
 * 模块路由跳转
 * @param target 跳转路径
 */
const toTarget = (target: string) => {
    router.push(target)
}


// ----------------------------
</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
}

/* header 导航css */
/* ------------------------ */
.header {
    display: flex;
    align-items: center;
}

.item {
    flex-basis: 0px;
    flex-grow: 1;
    margin: 15px;
}

/* 图标(后期替换成图片) */
.navigation-ico {
    flex-grow: 6;
}

/* 最后一个元素 */
.item:last-child {
    display: flex;
}

.item-other {
    flex-grow: 1;
    margin: 10px 10px 0 10px;
}

.item-en {
    font-weight: bold;
    opacity: 0.8;
}

.item-ch {
    font-size: x-small;
    opacity: 0.7;
}

/* ------------------------ */
/* 动画设置 */
.item:not(:last-child):hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.item-other:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* ------------------------ */
.menu-icon {
    display: none
}

.nav_box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.r-icon-style {
    margin: 10px 5px 0px 5px;
    cursor: pointer;
}
@media(max-width: 700px) {
    .navigation-ico {
        display: flex;
        margin-left: calc(100vw/2.7);
    }

    .item-smaller {
        display: none;
    }

    .menu-icon {
        position: absolute;
        display: flex;
    }
}
</style>